<script setup>
import { ref } from 'vue';
import { useCounterStore } from '../stores/counter'
import { useRouter } from 'vue-router'
const router = useRouter()
const counterStore = useCounterStore()
const dialogVisible = ref(false);
const uploadRef = ref(null);
const getAvatar = () => {
    return counterStore.Avatar === '' ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : counterStore.Avatar
}
const handleUpload = () => {
    uploadRef.value.submit()
}
const handleSuccess = (response) => {
    console.log(response.result)
    counterStore.Avatar = response.result
    ElMessage.success('change avatar success')
}
const handleError = (error) => {
    console.log(error)
    if (error.status === 401) {
        ElMessage.error('login expired, please login again')
        router.push('/')
    }
}
const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        ElMessage.error('Avatar picture must be JPG/PNG format!');
    }
    const isLt2M = file.size / 1024 / 1024 < 200;
    if (!isLt2M) {
        ElMessage.error('Avatar picture size can not exceed 100MB!');
    }
    return isJpgOrPng && isLt2M;
}

</script>

<template>
    <div style="width: 100%;height: 100%;">
        <el-dialog v-model="dialogVisible" title="chose the image you want to upload" width="500">
            <div style="height: 100px;position: relative;">
                <el-upload action="http://localhost:8080/api/send/file/image" :on-success="handleSuccess"
                    :on-error="handleError" ref="uploadRef" :auto-upload="false" :before-upload="beforeUpload"
                    :headers="{ 'token': counterStore.count }">
                    <el-button size="small" type="primary">chose the image</el-button>
                </el-upload>
                <el-button @click="handleUpload" style="position: absolute;right: 0;bottom: 0;">submit</el-button>
            </div>

        </el-dialog>
        <el-container style="height: 160px;">
            <el-header>
                <div class="header wow animate__animated animate__backInDown glass-container">
                    <el-row style="height: 100%;width: 100%;">
                        <el-col :span="3" style="display: flex;align-items: center;position: relative;">
                            <el-avatar size="large" style="margin-left: 20px;margin-bottom: 30px;" :src="getAvatar()" />
                            <el-link type="primary" style="position: absolute;left: 28px;bottom: 30px;font-size: 17px;"
                                @click="dialogVisible = true">mine</el-link>
                        </el-col>
                        <el-col :span="6">
                            <el-tabs style="font-size: 40px;" class="demo-tabs">
                                <el-tab-pane label="User" name="first">User</el-tab-pane>
                                <el-tab-pane label="Config" name="second">Config</el-tab-pane>
                                <el-tab-pane label="Role" name="third">Role</el-tab-pane>
                                <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
                            </el-tabs>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content ep-bg-purple-dark" />
                        </el-col>
                        <el-col :span="9" style="display: flex;justify-content: flex-end;align-items: center;">

                        </el-col>
                    </el-row>
                </div>
            </el-header>
        </el-container>
        <el-container class="glass-body-container animate__animated animate__fadeInDown animate__delay-1s"
            style="height: 800px; position: relative;">
            <div style="height: 300px;width: 300px;position: absolute;left: 3%;top :3% ;position: relative;">


            </div>

        </el-container>
    </div>
</template>

<style scoped>
.glass-container {
    /* 基础样式 */
    background: rgba(255, 255, 255, 0.2);
    /* 半透明白色背景 */
    backdrop-filter: blur(8px);
    /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(8px);
    /* Safari 兼容 */
    border-radius: 10px;
    /* 圆角边框 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* 微透明边框 */

    /* 玻璃反光效果 */
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    /* 容器大小设置（可根据需要调整） */
    margin-top: 10px;
    width: 100%;
    height: 140px;

    /* 可选：添加渐变效果增强质感 */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.1) 100%);
}

.glass-body-container {
    /* 基础样式 */
    background: rgba(255, 255, 255, 0.2);
    /* 半透明白色背景 */
    backdrop-filter: blur(8px);
    /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(8px);
    /* Safari 兼容 */
    border-radius: 10px;
    /* 圆角边框 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.1) 100%);
    height: 600px;
    width: 1604px;
    margin-left: 20px;
}
</style>
